<!-- 导航栏 -->
<template>
  <div class="nav">
    <ul class="nav-ul" v-show="isHome">
      <li :class="item.checked?'nav-li':'nav-li-checked'" v-for="item in pageArray" @click="changePage(item)">
        {{item.name}}
      </li>

      <!-- <li class="nav-li">LIFT</li>
      <li class="nav-li">BRIDGE</li>
      <li class="nav-li">GREENMARK</li>
      <li class="nav-li">FLOOD</li>
      <li class="nav-li">CAMPUS</li> -->
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Nav',
    props: [''],
    data() {
      return {
        // isHome: true,
        pageArray: [{
            name: 'TRAFFIC',
            checked: true
          }, {
            name: 'LIFT',
            checked: true
          }, {
            name: 'BRIDGE',
            checked: true
          }, {
            name: 'GREENMARK',
            checked: true
          }, {
            name: 'FLOOD',
            checked: true
          }, {
            name: 'CAMPUS',
            checked: true
          },
          {
            name: 'AIRPORT',
            checked: true
          },
          // {
          //   name: 'home',
          //   checked: true
          // }
        ]
      };
    },

    components: {

    },

    computed: {
      isHome() {
        return this.$store.state.app.isHome;
      }
    },

    beforeMount() {},

    mounted() {
      //console.log(this.isHome, '加载nav');
      // alert(this.$store.state.app.isHome)
    },

    methods: {
      //切换导航
      changePage(val) {
        if (this.$route.name !== val.name) {
          for (let i = 0; i < this.pageArray.length; i++) {
            if (this.pageArray[i].name === val.name) {
              this.pageArray[i].checked = false
            } else {
              this.pageArray[i].checked = true
            }
          }
          this.$router.push({
            name: val.name
          })
        } else {
          val.checked = !val.checked
        }
      }
    },

    watch: {}

  }
</script>
<style lang='' scoped>

</style>